<script lang="ts" setup>
import type {ComponentSize} from 'element-plus'
import {onMounted, ref} from "vue";
import {RolePage,RoleDelete} from "@/service/role.ts";
import {ElMessage} from 'element-plus'
import addOrUpdate from './addOrUpdate.vue';
const params = ref({
  currentPage: 1,
  pageSize: 10,
  username: ""
})

const pageTotal = ref(100)
const addBtn = ref(false);
const handleAddBtn = (newStatus: boolean) => {
  addBtn.value = newStatus;
}

const tableData = ref([])

const Page = async () => {
  const data: any = await RolePage(params.value);
  if (data.code == 200) {
    pageTotal.value = data.data.total;
    tableData.value = data.data.list;
    console.log(tableData.value)
  }
}

onMounted(() => {
  Page();
})


const handleEdit = (index: number, row: any) => {
  console.log(index, row)
}
const handleDelete =async (row: any) => {
  console.log(row.id)
  const data:any = await RoleDelete(row.id);
  if(data.code==200){
    ElMessage.success({
      message: '删除成功',
      type: 'success',
    })
    Page();
  }else{
    ElMessage.error({
      message: '删除失败',
      type: 'error',
    })
  }
}

const size = ref<ComponentSize>('default')
const background = ref(false)

const handleSizeChange = (val: number) => {
  params.value.pageSize = val;
  Page()
}
const handleCurrentChange = (val: number) => {
  params.value.currentPage = val;
  Page()
}
</script>
<template>
  <div class="mb-4" style="margin-bottom: 1%;">
    <span>角色：</span>
    <el-input v-model="params.username" style="width: 240px;margin-right:12px" placeholder="请输入"/>
    <el-button type="success" @click="Page">搜索</el-button>
    <el-button type="primary" @click="addBtn=true">添加</el-button>
    <el-button type="danger">删除</el-button>
  </div>
  <div v-if="tableData.length==0"
       style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center">
    <el-empty description="description"/>
  </div>
  <div v-else
       style="width: 100%;height: 100%;">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column property="roleName" label="RoleName"/>
      <el-table-column
          property="rolePower"
          label="权限"
          width="180"
          show-overflow-tooltip
      />
      <el-table-column align="right">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            Edit
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
          >
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <div style="display: block;height: 10px"></div>
      <el-pagination
          v-model:current-page="params.currentPage"
          v-model:page-size="params.pageSize"
          :page-sizes="[10, 20, 40, 50]"
          :size="size"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <add-or-update :add-btn="addBtn" @update-status="handleAddBtn"></add-or-update>
</template>

<style scoped>
.demo-pagination-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
